<template>
	<div class="content">
		<div class="contanier" v-if="info">
			<div class="title">{{info.examinationName}}</div>
			<div class="lasttime">
				<img class="txt5" src="@/assets/img/lasttime.png" />
				<span
					v-if="istotime==1">距离考试开始还有：{{ remainingTime.hr }}时{{ remainingTime.min }}分{{remainingTime.sec}}秒</span>
				<span
					v-else-if="istotime==2">距离考试结束还有：{{ remainingTime2.hr }}时{{ remainingTime2.min }}分{{remainingTime2.sec}}秒</span>
				<span v-else>已结束</span>
			</div>
			<div class="tablediv" id="printContent">
				<div class="table">
					<div class="picdiv">
						<el-image style="width: 100%; height: 100%" :src="info.avatorPath" fit="fill"></el-image>
					</div>
					<div class="row">
						<div class="cell f2">姓 名</div>
						<div class="cell f1">{{info.userName}}</div>
					</div>
					<div class="row">
						<div class="cell f2">准考证号</div>
						<div class="cell f1">{{info.candidate}}</div>
					</div>
					<div class="row">
						<div class="cell f2">身份证号</div>
						<div class="cell f1">{{info.idCard}}</div>
					</div>
					<div class="row">
						<div class="cell f2">考场</div>
						<div class="cell f1">{{info.examRoomName}}（{{info.mergename}}）</div>
					</div>
					<div class="row">
						<div class="cell f2">性 别</div>
						<div class="cell f1">{{info.gender==0?'男':(info.gender==1?'女':'保密')}}</div>
						<div class="cell f2">考 区</div>
						<div class="cell f1">{{info.areaName}}（代码{{info.areaId}}）</div>
					</div>
					<div class="row">
						<div class="cell f2">座 号</div>
						<div class="cell f1">{{info.sitNo}}</div>
						<div class="cell f2">考试科目</div>
						<div class="cell f1">{{info.categoryName}}</div>
					</div>
					<div class="row">
						<div class="cell f2">考试时间</div>
						<div class="cell f1">{{info.examTime}}</div>
						<div class="cell f2">考试总分</div>
						<div class="cell f1">{{info.totalScore}}</div>
					</div>
				</div>
			</div>
			
			<div class="infodiv">
				<div class="info">
					<div class="infotitle"><span>考生须知</span></div>
					<div class="infob"> <span>第一条</span>考试开始前30分钟，考生先本人准考证和有效居民身份证《香港、澳门、台湾籍考生凭有效身份证明，下同) 进入考场，完成电子
					</div>
					<div class="infob"> <span>第二条</span>考生进入考场时，应将准考证和有效居民身份证之外的其他物品(手机，电子设备应设置成关闭状态)
						存放在考场指定位置。携带准考证和有效居民身份证之外的物品《含电子、通讯、计算、存储等设备) 进入考位，按违纪进行处理。</div>
					<div class="infob"> <span>第三条</span>
						考生在完成签到后不得随意离开考场，如确有特殊情况需要暂时离开考场，必须经监考人员同意并由指定的监考人员陪同，凭本人有效居民身份证出入考场。考生在考试中途暂离考场，其离场时间计入本人的考试时间。
					</div>
					<div class="infob"> <span>第四条</span> 考场为考生统一提供演算纸笔。考试结束后，演算纸笔由监考人员统一收回，考生不得带出考场，违者按违纪进行处理。</div>
					<div class="infob"><span>第五条</span>
						考生入座后，在登录界面输入准考证号和居民身份证号登录考试系统，认真核对屏幕显示的本人相关信息，阅读并遵守《考生须知》及《操作说明》，等待考试开始。</div>
				</div>
			</div>
			<div class="savebtn">
				<el-button type="parimary" plain @click="print" style="margin-right: 15px;">打印准考证</el-button>
				<el-button type="primary" :class="{infobtn:istotime==2,disbtn:istotime!==2}" @click="tojoin"
					:disabled="istotime!==2">开始考试</el-button>
			</div>
		</div>
		<nav-footer style="position: absolute;bottom: 0;"></nav-footer>
	</div>
</template>
<script>
	import { outPutPdf } from "@/js/print.js";
	import NavFooter from '@/components/footer.vue'
	export default {
		components: { NavFooter, },
		data() {
			return {
				title: '报名表确认',
				info: null,
				remainingTime: {
					all: 0,
					day: 0,
					hr: 0,
					min: 0,
					sec: 0,
				},
				remainingTime2: {
					all: 0,
					day: 0,
					hr: 0,
					min: 0,
					sec: 0,
				},
				timer: null,
				timer2: null,
				// 1 未开始 2 考试中 3 已结束
				istotime: 1,
				pdfing:false
			};
		},

		mounted() {
			this.getbaseinfo()
		},
		methods: {
			print() {
				// const printContent = this.$refs.printContent.innerHTML;
				// const printWindow = window.open('', '_blank')
				// printWindow.document.write(printContent);
				// printWindow.document.close();
				// printWindow.focus();
				// printWindow.print();
				// printWindow.close();


				this.pdfing = true;
				this.$nextTick(() => {
					outPutPdf('printContent', '打印准考证1', false, true, () => {
						this.pdfing = false;
					});
				});
			},
			getbaseinfo() {
				this.$api.Usercenter.Prepareexam({
					examId: this.$route.query.examId,
					registId: this.$route.query
						.registId
				}).then(res => {
					this.info = res.data
					this.remainingTime.all = Date.parse(
						new Date(res.data.startTime)
					)
					this.remainingTime2.all = Date.parse(
						new Date(res.data.endTime)
					)
					this.timer = setInterval(() => {
						if (this.istotime > 1) {
							this.timer && clearInterval(this.timer)
						} else {
							this.countdown()
						}
					}, 1000)
					this.timer2 = setInterval(() => {
						if (this.istotime > 2) {
							this.timer2 && clearInterval(this.timer2)
						} else {
							this.countdown2()
						}
					}, 1000)
				})
			},
			//倒计时
			countdown() {
				const end = parseInt(this.remainingTime.all)
				const now = Date.parse(new Date())
				const msec = end - now
				if (msec < 0) {
					this.istotime = 2
					return
				}
				let day = parseInt(msec / 1000 / 60 / 60 / 24)
				let hr = parseInt((msec / 1000 / 60 / 60) % 24)
				let min = parseInt((msec / 1000 / 60) % 60)
				let sec = parseInt((msec / 1000) % 60)
				this.remainingTime.day = day
				this.remainingTime.hr = hr > 9 ? hr : '0' + hr
				this.remainingTime.min = min > 9 ? min : '0' + min
				this.remainingTime.sec = sec > 9 ? sec : '0' + sec
				if (min >= 0 && sec >= 0) {
					//倒计时结束关闭订单
					if (min === 0 && sec === 0 && hr === 0) {
						this.istotime = 2
						return
					}
				}
			},
			countdown2() {
				const end = parseInt(this.remainingTime2.all)
				const now = Date.parse(new Date())
				const msec = end - now
				if (msec < 0) {
					this.istotime = 3

					return
				}
				let day = parseInt(msec / 1000 / 60 / 60 / 24)
				let hr = parseInt((msec / 1000 / 60 / 60) % 24)
				let min = parseInt((msec / 1000 / 60) % 60)
				let sec = parseInt((msec / 1000) % 60)
				this.remainingTime2.day = day
				this.remainingTime2.hr = hr > 9 ? hr : '0' + hr
				this.remainingTime2.min = min > 9 ? min : '0' + min
				this.remainingTime2.sec = sec > 9 ? sec : '0' + sec
				if (min >= 0 && sec >= 0) {
					//倒计时结束关闭订单
					if (min === 0 && sec === 0 && hr === 0) {
						this.istotime = 3
						return
					}
				}
			},
			tojoin(userPaper) {
				// this.$router.push({
				// 	name: 'ExamPapersPlay',
				// 	query: {id:this.$route.query.recordId,userId:this.$route.query.registId,examinationId:this.$route.query.examId,endtime:this.info.endTime}
				// })

				this.$api.Examination.JoinRecord({
						id: this.$route.query.recordId,
						userId: this.$route.query.registId,
						examinationId: this.$route.query.examId,
						endtime: this.info.endTime
					})
					.then(res => {
						const data = res.data
						if (data && data.examRecordId) {
							this.$router.push({
								name: 'ExamPapersPlay',
								query: {
									id: data.examRecordId,
									userId: this.$route.query.registId,
									examinationId: this.$route.query.examId,
									endtime: this.info.endTime
								}
							})
						} else {
							this.$router.push({
								name: 'ExamPapersPlay',
								query: {
									id: this.$route.query.recordId,
									userId: this.$route.query.registId,
									examinationId: this.$route.query.examId,
									endtime: this.info.endTime
								}
							})
						}
					})
					.catch(e => {
						this.$message.error(e.msg)
					})
			},
		},
	};
</script>
<style lang="less" scoped>
	.content {
		width: 100%;

		.contanier {
			width: 1200px;
			min-height: 500px;
			margin: 30px auto;
			overflow: hidden;
			background-color: #fff;

			.infodiv {
				width: 1066px;
				background-color: #eee;
				margin: 42px auto 12px;

				.info {
					width: 950px;
					color: #383838;
					font-size: 16px;
					padding: 8px 12px 18px;
					margin: 0 auto;

					.infotitle {
						width: 100%;
						height: 40px;
						border-bottom: 1px solid #A6A6A6;
						text-align: center;
						margin: 8px 0 15px;

						span {
							font-weight: bold;
							color: #134B9F;
							border-bottom: 2px solid #134B9F;
							height: 100%;
							display: inline-block;
							line-height: 40px;
							font-size: 18px;
							letter-spacing: 4px;
							position: relative;
							top: 1px;
						}
					}

					.infot {
						line-height: 24px;
						font-weight: bold;
					}

					.infob {
						line-height: 28px;
						margin-top: 6px;

						span {
							color: #424242;
							margin-right: 8px;
							font-weight: bold;
						}
					}
				}
			}

			.savebtn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 80px;

				.infobtn {
					background-color: #134B9F;
					border: none;
				}

				.disbtn {
					background-color: #ccc;
					border: none;
				}
			}

			.header {
				color: #134B9F;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				padding-bottom: 9px;
				border-bottom: 2px solid #134B9F;
				display: inline-block;
				letter-spacing: 2px;
			}

			.title {
				margin-top: 23px;
				height: 50px;
				color: #3C3C3C;
				font-size: 26px;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.lasttime {
				height: 40px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				span {
					margin-left: 8px;
					color: #fd3c13;
				}
			}
			.tablediv{
				width:1050px;
				height:auto;
				margin:0 auto;
				padding:23px 0;
				.table {
					border-left: 2px solid #ccc;
					border-top: 2px solid #ccc;
					width: 825px;
					margin: 0 auto;
					font-size: 16px;
					color: #666;
					position: relative;
				
					.picdiv {
						position: absolute;
						right: 2px;
						top: 0;
						width: 155px;
						height: 178px;
						background-color: #fff;
						border-left: 2px solid #ccc;
					}
				
					.autogrow {
						min-height: 45px;
						height: auto !important;
				
						.cell {
							padding: 12px 12px;
						}
					}
				
					.row {
						display: flex;
						flex-direction: row;
						width: 100%;
						height: 45px;
				
						.cell {
							border-right: 2px solid #ccc;
							border-bottom: 2px solid #ccc;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							box-sizing: border-box;
				
						}
				
						.f2 {
							width: 200px;
							padding-left: 55px;
						}
				
						.f1 {
							flex: 1;
							padding-left: 18px;
						}
				
					}
				
				}
			}
			
		}
	}
</style>
